<template>
  <!-- 搜索 -->
  <ContentWrap>
    <el-form ref="queryFormRef" :model="queryParams" class="-mb-15px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="卡项状态" prop="status">
            <el-select v-model="queryParams.status" class="!w-280px" clearable placeholder="全部">
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.METON_CARD_STATUS)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon class="mr-5px" icon="ep:refresh" />
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-tabs v-model="queryParams.skuType" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="item in tabsData"
        :key="item.type"
        :label="item.name + '(' + item.count + ')'"
        :name="item.type"
      />
    </el-tabs>
    <el-table lazy v-loading="loading" :data="list" row-key="id" ref="tableRef">
      <el-table-column label="来源订单" align="center" prop="no" width="180" />
      <el-table-column label="ID" align="center" prop="id" width="120" />
      <el-table-column min-width="260" align="left" prop="spuName" label="卡项名称">
        <template #default="{ row }">
          <div class="flex">
            <div class="flex items-center">
              <div class="mr-[10px] flex items-center">
                <el-image :src="row.picUrl" class="!h-[48px] !w-[48px] border-rd-4px">
                  <template #error>
                    <div class="image-slot">
                      <icon icon="ep:picture" />
                    </div>
                  </template>
                </el-image>
              </div>

              <el-tooltip :content="row.spuName" placement="top">
                <span class="text-left overflow-hidden">
                  <meton-tag
                    v-if="row?.sales"
                    :is-dict="false"
                    class="mr-5px"
                    effect="plain"
                    :value="'赠品'"
                  />
                  <meton-tag
                    v-if="row?.spuType == 2"
                    :dict-type="DICT_TYPE.PRODUCT_SPU_TYPE2"
                    :value="row?.skuType"
                    effect="plain"
                  />
                  <meton-tag
                    v-else-if="row?.spuType == 4"
                    :dict-type="DICT_TYPE.PRODUCT_SPU_TYPE4"
                    :value="row?.skuType"
                    effect="plain"
                  />
                  <meton-tag
                    :dict-type="DICT_TYPE.PRODUCT_SPU_TYPE"
                    :value="row?.spuType"
                    effect="plain"
                    v-else
                  />
                  {{ row.spuName }}
                  <meton-tag
                    :is-dict="false"
                    :value="`${row?.specType ? skuSpecFormat(row?.properties) : ''},${row.spuType == 2 ? filterCardAttributes(row, true, true) : ''}`"
                  />
                </span>
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="卡项名称" align="left" prop="spuName" min-width="200">
        <template #default="{ row }">
          <div class="flex">
            <div class="flex items-center">
              <div class="mr-[10px] flex items-center">
                <el-image :src="row.picUrl" class="!h-[48px] !w-[48px] border-rd-4px" />
              </div>

              <ElTooltip :content="row.spuName" placement="top">
                <span class="overflow-ellipsis overflow-hidden">
                  {{ row.spuName }}
                </span>
              </ElTooltip>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="属性" align="center" prop="skuType">
        <template #default="scope">
          <DictText
            :type="DICT_TYPE.PRODUCT_SPU_TYPE2"
            :value="scope.row.skuType"
            v-if="scope.row.skuType"
          />
        </template>
      </el-table-column>
      <el-table-column label="规格" align="center" prop="properties">
        <template #default="scope">
          {{ queryParams.skuType }}
          <meton-tag
            :is-dict="false"
            :value="`${skuSpecFormat(scope.row?.properties)},${scope.row.spuType == 2 ? filterCardAttributes(scope.row, true, true) : ''}`"
          />
        </template>
      </el-table-column> -->
      <el-table-column label="购买数量" align="center" prop="count" />
      <el-table-column
        label="剩余时间/次数"
        v-if="queryParams.skuType == '' || queryParams.skuType == '22'"
        align="center"
        min-width="100"
        prop="leftStatus"
      />
      <el-table-column
        label="剩余次数"
        min-width="100"
        v-if="queryParams.skuType == '20'"
        align="center"
        prop="leftStatus"
      />
      <el-table-column
        label="剩余时间"
        min-width="100"
        v-if="queryParams.skuType == '21'"
        align="center"
        prop="leftStatus"
      />
      <el-table-column
        v-if="queryParams.skuType == '' || queryParams.skuType == '22'"
        label="可用时间/次数"
        align="center"
        min-width="100"
        prop="enableStatus"
      />
      <el-table-column
        v-if="queryParams.skuType == '20'"
        label="可用次数"
        min-width="100"
        align="center"
        prop="enableStatus"
      />
      <el-table-column
        v-if="queryParams.skuType == '21'"
        label="可用时间"
        min-width="100"
        align="center"
        prop="enableStatus"
      />
      <el-table-column align="center" label="剩余欠款" min-width="100" prop="leavePrice">
        <template #default="scope">
          <span :class="{ 'text-red': scope.row.leavePrice > 0 }">{{
            floatToFixed2(scope.row.leavePrice) + '元'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="queryParams.skuType == '102'"
        label="过期数量"
        align="center"
        prop="bizType"
      />
      <el-table-column v-else label="待激活数量" align="center" prop="bizType" />
      <el-table-column
        v-if="queryParams.skuType == '102'"
        label="过期原因"
        align="center"
        prop="reason"
      />
      <el-table-column
        :formatter="dateFormatter"
        align="center"
        label="到账时间"
        prop="createTime"
        width="120px"
      />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
</template>

<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'

import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { floatToFixed2, skuSpecFormat } from '@/utils'
import { useProductUtils } from '@/views/mall/product/hooks/useProduct'
const { filterCardAttributes } = useProductUtils()
import * as PayApi from '@/api/shop/trade/pay'

const { userId } = defineProps({
  userId: {
    type: Number,
    required: true
  }
})

// tabs 数据
const tabsData = ref([
  {
    name: '全部',
    type: '',
    count: 0
  },
  {
    name: '计次卡',
    type: 20,
    count: 0
  },
  {
    name: '计时卡',
    type: 21,
    count: 0
  },
  {
    name: '计时计次',
    type: 22,
    count: 0
  },
  {
    name: '过期卡项',
    type: 102,
    count: 0
  }
])

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  skuType: '',
  userId: userId,
  status: undefined
})
const queryFormRef = ref() // 搜索的表单
/** 切换 Tab */
const handleTabClick = () => {
  nextTick(() => {
    getList()
  })
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const { data, dataMap } = await PayApi.getPayWalletPageCartDataMap(queryParams)
    list.value = data.list

    total.value = data.total
    tabsData.value.forEach((ele) => {
      if (ele.type == 0) {
        ele.count = dataMap.totalNum
      }
      if (ele.type == 20) {
        ele.count = dataMap.cart20Num
      }
      if (ele.type == 21) {
        ele.count = dataMap.cart21Num
      }
      if (ele.type == 22) {
        ele.count = dataMap.cart22Num
      }
      if (ele.type == 102) {
        ele.count = dataMap.noNum
      }
    })
  } finally {
    loading.value = false
  }
}
const tableRef = ref()
// 点击其他信息
// const expandMsg = (row?: any) => {
//   // expand 展开
//   console.log(tableRef.value)
//   row.isShowMsg = !row.isShowMsg
//   tableRef.value.toggleRowExpansion(row)
// }

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 初始化 **/
onMounted(() => {
  queryParams.userId = userId
  getList()
})
</script>
<style lang="scss" scoped>
// 隐藏expand 箭头
:deep(.el-table__expand-column) {
  visibility: hidden;
}
</style>
